<template>
	<div class="container">

		<view class="content">
			<view class="asset-card">
				<view class="amount-box">
					<view class="amount">当前价格</view>
					<text class="amount">{{ activeTab === 0 ? '1' : '0' }}</text>
				</view>
			</view>

			<view class="asset-cards">
				<view class="amount-boxs">
					<text class="amount">TX通证</text>
					<text class="amount">{{ activeTab === 0 ? '5.00' : '0.00' }}</text>
				</view>
				<view class="amount-boxs">
					<text class="amount">钱包地址 <text style="font-size: 14px;margin-left: 10px;">复制地址</text></text>
					<view>{{walletAddress}}</view>
				</view>
			</view>
		</view>
		<!-- 操作按钮组 -->
		<div class="action-buttons">
			<view class="action-btn">
				<image src="@/static/blind/out.png"></image>
				<view>转出</view>
			</view>
			<view class="action-btn">
				<image src="@/static/blind/yunsl.png"></image>
				<view>云算力</view>
			</view>
			<view class="action-btn">
				<image src="@/static/blind/jiaoyi.png"></image>
				<view>交易</view>
			</view>
		</div>

		<!-- ECharts图表 -->
		<div class="card chart-card">
			<!-- <div ref="chart" style="height: 300px;"></div> -->
			<uCharts></uCharts>
		</div>

		<!-- 空状态提示 -->
		<div class="empty-state">
			<span>暂无乐豆记录哦~</span>
		</div>
	</div>
</template>

<script>
	import uCharts from './compent/echarts.vue'

	export default {
		components: {
			uCharts
		},
		data() {
			return {
				walletAddress: 'Ixwbce8dbebd45bb6a12',
				chartData: {
					years: ['2012', '2013', '2014', '2015', '2016', '2017'],
					values: [200, 20, 150, 100, 50, 0] // 根据截图最后年份数据补0
				}
			}
		},
		mounted() {
			// this.initChart();
		},
		methods: {
			initChart() {
				const chart = echarts.init(this.$refs.chart);
				const option = {
					xAxis: {
						type: 'category',
						data: this.chartData.years,
						axisLabel: {
							color: '#666'
						}
					},
					yAxis: {
						type: 'value',
						name: '单位（TX）',
						axisLabel: {
							color: '#666'
						}
					},
					series: [{
						data: this.chartData.values,
						type: 'bar',
						itemStyle: {
							color: '#409EFF'
						},
						barWidth: '30%'
					}],
					tooltip: {
						trigger: 'axis'
					}
				};
				chart.setOption(option);

				// 窗口变化时自适应
				window.addEventListener('resize', () => chart.resize());
			},
			copyAddress() {
				navigator.clipboard.writeText(this.walletAddress)
					.then(() => this.$message.success('复制成功'))
					.catch(() => this.$message.error('复制失败'));
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
	}

	.content {
		width: 100%;
		height: 180px;
		padding: 20px;
		padding-top: 10px;
		background-color: #e73224;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.body-tab {
		z-index: 999;
		width: 92%;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		border: 1px solid lavender;
		position: relative;
		top: -20px;
	}

	/* 资产卡片 */
	.asset-card {
		border-radius: 20rpx;
		margin-bottom: 40rpx;
	}

	.asset-cards {
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		display: flex;

		.amount-boxs {
			width: 50%;
		}
	}


	.amount-box {
		text-align: left;
		display: block;
		font-size: 13px;
		color: #fff;

		:nth-child(2) {
			color: #f79b6d;
		}
	}

	.amount {
		display: block;
		font-size: 34rpx;
		color: #fff;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.price {
		font-size: 28rpx;
		color: #fbffff;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 2px;
		background: #e73224;
		/* 将白色改为红色 */
		border-radius: 3rpx;
	}

	.action-buttons {
		display: flex;
		gap: 20px;
		justify-content: center;
		margin: 20px 0;
	}

	.action-btn {
		text-align: center;
		width: 33%;

		image {
			width: 35px;
			height: 35px;
		}
		view{
			font-size: 14px;
		}
	}

	.empty-state {
		text-align: center;
		color: #909399;
		padding: 20px;
	}
</style>
